<template>
  <div class="example">
    <transition
      name="custom-classes-transition"
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
    >
      <div class="box" v-show="isShow"></div>
    </transition>
    <div class="btn">
      <button @click="handleClick">{{ isShow ? "隐藏" : "显示" }}</button>
    </div>
  </div>
</template>

<script>
/**
 * 例子 - 自定义过渡的类名
 */

/**
 * 动态加载CSS文件
 */
function loadCss(url) {
  const link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.href = url;
  document.getElementsByTagName('head')[0].appendChild(link);
}

export default {
  data() {
    return {
      isShow: true,
    };
  },
  created() {
    loadCss(`https://cdn.jsdelivr.net/npm/animate.css@3.5.1`);
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow;
    },
  },
};
</script>
